<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			ul {
				font-size: 14px;
				/*color: #8f8f94;*/
				color: white;
			}
			.mui-btn {
				padding: 10px;
			}
			
			.iconImage {
				width: 100%;
				height: 100%;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 class="mui-title">高速公路气象监测系统</h1>
		</header>
		<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/weatherPrediction/map.html">
		            	<a href="javaScript:;">
		                    <img src="images/tqyb.png" class="iconImage" />
		                    <div class="mui-media-body">天气预报</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/weatherStation/index.html">
		            	<a href="javaScript:;">
		                	<img src="images/qxz.png" class="iconImage" />
		                    <div class="mui-media-body">气象站</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/damageWarn/index.html">
		            	<a href="javaScript:;">
		                    <img src="images/zrzh.png" class="iconImage" />
		                    <div class="mui-media-body">灾害预报</div></a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/weatherMaps/index.html">
		            	<a href="javaScript:;">
		                    <img src="images/zgdt.png" class="iconImage" />
		                    <div class="mui-media-body">气象图例</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/historicalData/historicaldata.html">
		            	<a href="javaScript:;">
		                    <img src="images/lssj.png" class="iconImage" />
		                    <div class="mui-media-body">历史数据</div>
		           		</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/disasterStatistics/disasterstatistics.html">
		            	<a href="javaScript:;">
		                    <img src="images/tj.png" class="iconImage" />
		                    <div class="mui-media-body">灾害统计</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/personalCenter/personalcenter.html">
		            	<a href="javaScript:;">
		                    <img src="images/grzx-selected.png" class="iconImage" />
		                    <div class="mui-media-body">个人中心</div>
		            	</a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/systemSetting/index.html">
		            	<a href="javaScript:;">
		                    <img src="images/sys-setting.png" class="iconImage" />
		                    <div class="mui-media-body">系统设置</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4" m-href="views/aboutUs/index.html">
		            	<a href="javaScript:;">
		                    <img src="images/about.png" class="iconImage" />
		                    <div class="mui-media-body">关于我们</div></a></li>
		        </ul> 
		        <div class="mui-content-padded oauth-area">
					&copy;上海同望信息技术有限公司
				</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/jquery-3.2.1.js"></script>
		<script>
			(function($, doc) {
				$.init();
				var settings = app.getSettings();
//				var account = doc.getElementById('account');
				//
				window.addEventListener('show', function() {
					var state = app.getState();
//					account.innerText = state.account;
				}, false);
				$.plusReady(function() {
//					var settingPage = $.preload({
//						"id": 'setting',
//						"url": 'setting.html'
//					});
//					//设置
					mui('ul').on('tap','li',function(){
						var mHref=this.getAttribute("m-href");
						console.log(mHref);
						$.openWindow({
							id: mHref,
							url:mHref,
							createNew:false, 
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'close'
							},
							waiting: {
								autoShow: false
							}
						});
						
					});
//					var settingButton = doc.getElementById('setting');
//					//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
//					settingButton.addEventListener('tap', function(event) {
//						$.openWindow({
//							id: 'setting',
//							show: {
//								aniShow: 'pop-in'
//							},
//							styles: {
//								popGesture: 'hide'
//							},
//							waiting: {
//								autoShow: false
//							}
//						});
//					});
//					//--
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
		</script>
	</body>

</html>